<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			//test jquery 不存在 undefined
			//alert(window.$);
		</script>
		<script type="text/javascript" src="/js/jquery/jquery-1.4.2.js"></script>
		<script type="text/javascript" src="/js/selectUtil.js"></script>
		
		

		<!-- 本地ajaxfileupload 调式 -->		
		<script type="text/javascript">
			
	jQuery.extend({
		
	
	    createUploadIframe: function(id, uri)
		{
				//create frame
	            var frameId = 'jUploadFrame' + id;
	            var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
				if(window.ActiveXObject)
				{
	                if(typeof uri== 'boolean'){
						iframeHtml += ' src="' + 'javascript:false' + '"';
	
	                }
	                else if(typeof uri== 'string'){
						iframeHtml += ' src="' + uri + '"';
	
	                }	
				}
				iframeHtml += ' />';
				jQuery(iframeHtml).appendTo(document.body);
	
	            return jQuery('#' + frameId).get(0);			
	    },
	    createUploadForm: function(id, fileElementId, data)
		{
			//create form	
			var formId = 'jUploadForm' + id;
			var fileId = 'jUploadFile' + id;
			var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');	
			if(data)
			{
				for(var i in data)
				{
					jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
				}			
			}		
			var oldElement = jQuery('#' + fileElementId);
			var newElement = jQuery(oldElement).clone();
			jQuery(oldElement).attr('id', fileId);
			jQuery(oldElement).before(newElement);
			jQuery(oldElement).appendTo(form);
	
	
			
			//set attributes
			jQuery(form).css('position', 'absolute');
			jQuery(form).css('top', '-1200px');
			jQuery(form).css('left', '-1200px');
			jQuery(form).appendTo('body');		
			return form;
	    },
	
	    ajaxFileUpload: function(s) {
	        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout		
	        s = jQuery.extend({}, jQuery.ajaxSettings, s);
	        var id = new Date().getTime()        
			var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
			var io = jQuery.createUploadIframe(id, s.secureuri);
			var frameId = 'jUploadFrame' + id;
			var formId = 'jUploadForm' + id;		
	        // Watch for a new set of requests
	        if ( s.global && ! jQuery.active++ )
			{
				jQuery.event.trigger( "ajaxStart" );
			}            
	        var requestDone = false;
	        // Create the request object
	        var xml = {}   
	        if ( s.global )
	            jQuery.event.trigger("ajaxSend", [xml, s]);
	        // Wait for a response to come back
	        var uploadCallback = function(isTimeout)
			{			
				var io = document.getElementById(frameId);
	            try 
				{				
					if(io.contentWindow)
					{
						 xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
	                	 xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
						 
					}else if(io.contentDocument)
					{
						 xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
	                	xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
					}						
	            }catch(e)
				{
					jQuery.handleError(s, xml, null, e);
				}
				
				
				//alert("xml.responseText:"+xml.responseText+" \n\nxml.responseXML:"+xml.responseXML);
	            if ( xml || isTimeout == "timeout") 
				{			
	                requestDone = true;
	                var status;
	                try {
	                    status = isTimeout != "timeout" ? "success" : "error";
	                    // Make sure that the request was successful or notmodified
	                    if ( status != "error" )
						{
							//2012-06-12 huxh add
		                    // 依赖jquery
		                    var isLoadJquery = typeof(window.$) == 'undefined' || window.$ == null ;
		                    //alert(isLoadJquery);
		                    if(!isLoadJquery){
								if($("#temp_hidden_error").length>0){
									$("#temp_hidden_error").empty();//清空内容
								}else{
									$("body").append("<div id='temp_hidden_error'></div>");
								}
								$("#temp_hidden_error").append(xml.responseText);
								$("#temp_hidden_error").hide();
								
								if($("#upload_error").length>0){
									var errormessage=$("#upload_error").html();
									//alert(errormessage);
									if( errormessage != null ){
										$("#uploadErrorTip").empty();
										$("#uploadErrorTip").append("file upload error:"+errormessage);
									}
									//jQuery.handleError(s, xml, status , e ,errormessage);//触发异常
									//return ;// 终止后续操作，显示异常信息
									throw new Error("上传文件不符合要求!");
								}
		                    }
						
							
	                        // process the data (runs the xml through httpData regardless of callback)
	                        var data = jQuery.uploadHttpData( xml, s.dataType );    
	                        // If a local callback was specified, fire it and pass it the data
	                        if ( s.success )
	                            s.success( data, status );
	    
	                        // Fire the global callback
	                        if( s.global )
	                            jQuery.event.trigger( "ajaxSuccess", [xml, s] );
	                    } else
	                        jQuery.handleError(s, xml, status);
	                } catch(e) 
					{
	                    status = "error";
	                    jQuery.handleError(s, xml, status, e);
	                }
	
	                // The request was completed
	                if( s.global )
	                    jQuery.event.trigger( "ajaxComplete", [xml, s] );
	
	                // Handle the global AJAX counter
	                if ( s.global && ! --jQuery.active )
	                    jQuery.event.trigger( "ajaxStop" );
	
	                // Process result
	                if ( s.complete )
	                    s.complete(xml, status);
	
	                jQuery(io).unbind()
	
	                setTimeout(function()
										{	try 
											{
												jQuery(io).remove();
												jQuery(form).remove();	
												
											} catch(e) 
											{
												jQuery.handleError(s, xml, null, e);
											}									
	
										}, 100)
	
	                xml = null
	
	            }
	        }
	        // Timeout checker
	        if ( s.timeout > 0 ) 
			{
	            setTimeout(function(){
	                // Check to see if the request is still happening
	                if( !requestDone ) uploadCallback( "timeout" );
	            }, s.timeout);
	        }
	        try 
			{
	
				var form = jQuery('#' + formId);
				jQuery(form).attr('action', s.url);
				jQuery(form).attr('method', 'POST');
				jQuery(form).attr('target', frameId);
	            if(form.encoding)
				{
					jQuery(form).attr('encoding', 'multipart/form-data');      			
	            }
	            else
				{	
					jQuery(form).attr('enctype', 'multipart/form-data');			
	            }			
	            jQuery(form).submit();
	
	        } catch(e) 
			{			
	            jQuery.handleError(s, xml, null, e);
	        }
			
			jQuery('#' + frameId).load(uploadCallback	);
	        return {abort: function () {}};	
	
	    },
	
	    uploadHttpData: function( r, type ) {
	        var data = !type;
	        data = type == "xml" || data ? r.responseXML : r.responseText;
	        // If the type is "script", eval it in global context
	        if ( type == "script" )
	            jQuery.globalEval( data );
	        // Get the JavaScript object, if JSON is used.
	        if ( type == "json" )
	            eval( "data = " + data );
	        // evaluate scripts within html
	        if ( type == "html" )
	            jQuery("<div>").html(data).evalScripts();
	
	        return data;
	    }
	})
	
			
		</script>
		
		
				
		
		
		<script type="text/javascript">
		
		JqajaxSelect.openDebug();
		
		
		function ajaxFileUpload(){
			// 清空错误提示
			$("#uploadErrorTip").empty();
		
			$("#loading")
			.ajaxStart(function(){
				$(this).show();
				$("#uploadForm").hide();
			})//开始上传文件时显示一个图片
			.ajaxComplete(function(){
				$(this).hide();
				$("#uploadForm").show();
			});//文件上传完成将图片隐藏起来
			
			$.ajaxFileUpload(
				{
					url:'/ajax/upload/saveSysFile.do',//用于文件上传的服务器端请求地址
					secureuri:false,//一般设置为false
					fileElementId:'file',//文件上传空间的id属性  <input type="file" id="file" name="file" />
					dataType: 'json',//返回值类型 一般设置为json
					/*
					* 服务器成功响应处理函数
					*/
					success: function (data, status){
						//JqajaxSelect.debug(data);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量
						//JqajaxSelect.debug("状态："+status);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量
						//JqajaxSelect.debug(data.sysFileIds);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量
						
						// 成功，将返回SysFileId 作为隐藏标签
						$(data.sysFiles).each(function(index, item) {
							//JqajaxSelect.debug(item);
							//sysFiles 
							//$("#uploadResult").append(item.fileName+"("+item.createDate+")...上传成功<br>");
							var now = new Date();
							$("#uploadResult").append(now.toLocaleTimeString()+"  : "+item.fileTitle+"("+item.size+")上传成功...<br>");
							$("#uploadResult").append("<input type='hidden' name='sysFileIds' value='"+item.id+"'>");
							
						});
						
						
						
						if(typeof(data.error) != 'undefined')
						{
							if(data.error != '')
							{
								alert(data.error);
							}else
							{
								alert(data.sysFiles);
							}
						}
					},
					/*
					*	服务器响应失败处理函数
					*/
					error: function (data, status, e ){
						/*
						if( errormessage != null ){
							$("#uploadResult").append("file upload error:"+errormessage);
						}
						*/
						//alert(e);
						$("#uploadErrorTip").append(e);
					}
				}
			);
			
			return false;
	
		}
		
		
		$("document").ready(function (){
			
			$("#file").change(function (){
				ajaxFileUpload();
			});
			
			/**
			$("#file").change(function (){
				alert("file change");
			});
			**/
			
		});
		
	</script>
	</head>
	<body>
	<h1>本地ajax file upload 调式</h1>
	<h4>文件上传异常，struts2 文件上传拦截器返回的actionerror信息，通过ajax file upload框架显示处理</h4>
		<div id="uploadMain">
			
			<div id="loading" style="display: none;">
				<img src="/js/jquery/ajaxfileupload/loading.gif" >
			</div>
			<!-- //end 文件上传加载图标 -->
			
			<div id="uploadErrorTip" style="font:9pt;color: red ;">
			</div>
			<!-- //end 错误提示 -->
			<div id="uploadForm">
				<input type="file" id="file" name="upload" />
				<br />
				<input type="button" value="上传" onclick="return ajaxFileUpload();">
			</div>
			<!-- //end 文件上传Form表单 -->
			
			
			<div id="uploadResult" style="color:green; font: 9pt;">
			</div>
			<!-- //end 文件上传返回结果 -->
		</div>
	</body>
</html>